import appStyle from '../../assets/css/app.module.scss'
// toast
const toast = {
  open(msg='无信息', delay=1000) {
    let toast = document.getElementById('ABLE_TOOLTIP_TOAST')
    if (toast == null) {
      const div = document.createElement('div')
      div.setAttribute('id', 'ABLE_TOOLTIP_TOAST')
      document.body.appendChild(div)
      toast = document.getElementById('ABLE_TOOLTIP_TOAST')
    }
    let cw = document.documentElement.clientWidth || document.body.clientWidth
    let bgColor = cw > appStyle.mobileWidth ? appStyle.colorModalBg : 'rgba(0,0,0,0)'
    let fontColor = cw > appStyle.mobileWidth ? '#fff' : 'rgba(50,50,50,.75)'
    let innerStr = cw > appStyle.mobileWidth 
    ? `<div style="background-color:${fontColor};width:auto;height:auto;padding:1.5rem 3rem;max-width: 90%;border-radius: .2rem;">${msg}</div>`
    : `<div style="background-color:${fontColor};color: #fff;width:auto;height:auto;padding:1rem 2rem;max-width: 90%;border-radius: .2rem;">${msg}</div>`
    if (msg == 'loading') {
      innerStr = `<i class="iconfont icon-loading11 animation-spin" style="font-size: 3rem;color: #333;"></i>`
      delay = 99999
    }
    
    toast.innerHTML = ''
    toast.innerHTML = 
    `<div id="ABLE_TOOLTIP_TOAST_BG" class="animate__animated animate__fadeIn animate__faster"`+
      `style="position: fixed;top:0;left: 0;width: 100%;height:calc(100vh);z-index: 10;`+
      `display:flex;align-items: center;justify-content: center;background-color: ${bgColor}"`+
    `>`+innerStr+`</div>`

    setTimeout(() => {
      this.close()
    }, delay);
  },
  close() {
    const toast = document.getElementById('ABLE_TOOLTIP_TOAST')
    if ( toast != null) {
      const bg = document.getElementById('ABLE_TOOLTIP_TOAST_BG')
      if ( bg != null) {
        bg.classList.remove('animate__fadeIn')
        bg.classList.add('animate__fadeOut')
      }
      setTimeout(() => {
        toast.innerHTML = ''
      }, 500);
    }
  }
}
// message
const message = {
  open(msg='', delay=1500, type='', closeIcon=false) {
    if (msg == '') return
    let message = document.getElementById('ABLE_TOOLTIP_MESSAGE')
    if (message == null) {
      const div = document.createElement('div')
      div.setAttribute('id', 'ABLE_TOOLTIP_MESSAGE')
      document.body.appendChild(div)
      message = document.getElementById('ABLE_TOOLTIP_MESSAGE')
    }
    
    message.style.position = 'fixed'
    message.style.top = '1rem'
    message.style.left = '50%'
    message.style.width = '350px'
    message.style.marginLeft = '-175px'
    message.style.zIndex = 10
    const inner = document.createElement('div')
    message.appendChild(inner)
    inner.classList.add('animate__animated')
    inner.classList.add('animate__fadeInDown')
    inner.classList.add('animate__faster')
    inner.style.paddingTop = '1rem'

    let bgC = appStyle.colorPrimaryAway
    let fc = appStyle.colorPrimary
    let icon = `<i class="iconfont icon-tishi" style="margin-right: .2rem;margin-top: .1rem;"></i>`
    if (type == 'success') {
      bgC = appStyle.colorSuccessAway
      fc = appStyle.colorSuccess
      icon = `<i class="iconfont icon-xiaoxi-chenggong" style="margin-right: .2rem;margin-top: .1rem;"></i>`
    }
    if (type == 'warning') {
      bgC = appStyle.colorWarningAway
      fc = appStyle.colorWarning
      icon = `<i class="iconfont icon-jinggao" style="margin-right: .2rem;margin-top: .1rem;"></i>`
    }
    if (type == 'error') {
      bgC = appStyle.colorErrorAway
      fc = appStyle.colorError
      icon = `<i class="iconfont icon-cuowu" style="margin-right: .2rem;margin-top: .1rem;"></i>`
    }
    let closeBtn = closeIcon?`<i class="iconfont icon-guanbi message-close-btn" style="position: absolute;top:1.8rem;right:.8rem;color: #ccc;padding: .3rem;font-size: 1rem;cursor:pointer;"></i>`:``
    inner.innerHTML = 
    `<div style="background-color: ${bgC};color: ${fc};width: 100%;padding: 1rem 2rem;`+
    `border-radius: .1rem;border: .01rem solid #eee;`+
    `display: flex;flex-direction: row;align-items: center;justify-content: center;`+
    `">${icon}${msg}${closeBtn}
    </div>`

    let _this = this
    inner.addEventListener('click',function(e){
      let cc = e.target.classList.value
      if (cc.indexOf('message-close-btn') >= 0) {
        _this.close(inner)
      }
    })

    setTimeout(() => {
      if (!closeIcon) this.close(inner)
    }, delay);
  },
  close(e) {
    // console.log(e)
    if (e == null) return
    e.classList.remove('animate__fadeInDown')
    e.classList.add('animate__fadeOutUp')
    setTimeout(() => {
      e.parentNode.removeChild(e)
    }, 500);
  }
}

export default {
  toast, message
}